<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>

  <page-bg></page-bg>
  <u-navbar
      :safeAreaInsetTop="false"
      :placeholder="false"
      :is-back="true"
      :is-fixed="true"
      :title="$theme.title"
      :border-bottom="false"
      :title-bold="true"
      :title-color="'#111111'"
      :background="{ background : navBg }"
  >
  </u-navbar>

  <view
      class="register min-h-full flex flex-col items-center px-[60rpx] pt-[40rpx] box-border"
  >
    <view>
      <image
          :src="appStore.getWebsiteConfig.shop_logo"
          mode="widthFix"
          class="w-[160rpx] h-[160rpx] rounded-full"
      />
    </view>
    <view class="mt-[60rpx] font-bold" style="font-size: 40rpx;">新用户注册</view>

    <view class="w-full mt-[60rpx]">
      <view
          class="bg-white px-[18rpx] border border-lightc border-light rounded-[40px] h-[110rpx] items-center flex"
      >
        <view class="pl-[25rpx] pr-[25rpx] border-r border-solid border-0 border-light">
          <u-image class="ml-[13rpx] mr-[13rpx]" width="25rpx" height="25rpx"
                   :src="`${$domain}/static/icons/login/phone.svg`" mode="widthFix"></u-image>
        </view>
        <u-input
            class="flex-1 mx-[20rpx]"
            v-model="formData.mobile"
            :border="false"
            placeholder="请输入您的手机号"
        />
      </view>

      <view
          class="bg-white px-[18rpx] border border-lightc border-light rounded-[40px] h-[100rpx] items-center flex mt-[40rpx]"
      >
        <view class="pl-[25rpx] pr-[25rpx] border-r border-solid border-0 border-light">
          <u-image class="ml-[13rpx] mr-[13rpx]" width="25rpx" height="25rpx"
                   :src="`${$domain}/static/icons/login/password.svg`" mode="widthFix"></u-image>
        </view>
        <u-input
            class="flex-1 mx-[20rpx]"
            type="password"
            v-model="formData.password"
            placeholder="请输入密码"
            :border="false"
        />
      </view>
      <view
          class="bg-white px-[18rpx] border border-lightc border-light rounded-[40px] h-[100rpx] items-center flex mt-[40rpx]"
      >
        <view class="pl-[25rpx] pr-[25rpx] border-r border-solid border-0 border-light">
          <u-image class="ml-[13rpx] mr-[13rpx]" width="25rpx" height="25rpx"
                   :src="`${$domain}/static/icons/login/password.svg`" mode="widthFix"></u-image>
        </view>
        <u-input
            class="flex-1 mx-[20rpx]"
            type="password"
            v-model="formData.password_confirm"
            placeholder="请再次输入密码"
            :border="false"
        />
      </view>
      <view
          class="bg-white px-[18rpx] border border-lightc border-light rounded-[40px] h-[100rpx] items-center flex mt-[40rpx]"
      >
        <view class="pl-[25rpx] pr-[25rpx] border-r border-solid border-0 border-light">
          <u-image class="ml-[13rpx] mr-[13rpx]" width="25rpx" height="25rpx"
                   :src="`${$domain}/static/icons/login/code.svg`" mode="widthFix"></u-image>
        </view>
        <u-input
            class="flex-1 mx-[20rpx]"
            type="number"
            v-model="formData.code"
            placeholder="请输入验证码"
            :border="false"
        />
        <view @click="sendDxCode" class="text-color mx-[20rpx]">
          <u-verification-code
              ref="uCodeRef"
              :seconds="60"
              @change="codeChange"
              change-text="x秒"
          />
          {{ codeTips }}
        </view>
      </view>
      <view class="mt-[40rpx]" v-if="isOpenAgreement && false">
        <u-checkbox v-model="isCheckAgreement" shape="circle">
          <view class="text-xs flex">
            已阅读并同意
            <view @click.stop>
              <router-navigate
                  class="text-primary"
                  hover-class="none"
                  to="/pages/agreement/agreement?type=service"
              >
                《服务协议》
              </router-navigate>
            </view>

            和
            <view @click.stop>
              <router-navigate
                  class="text-primary"
                  hover-class="none"
                  to="/pages/agreement/agreement?type=privacy"
              >
                《隐私协议》
              </router-navigate>
            </view>
          </view>
        </u-checkbox>
      </view>
      <view class="mt-[60rpx]">
        <u-button
            type="primary"
            hover-class="none"
            shape="circle"
            @click="accountRegister"
            :customStyle="{
                        height: '100rpx',
                        boxShadow: 'inset 0px 2px 10px 0px rgba(255, 255, 255, 0.4)',
                        background: `linear-gradient(90deg, #7751E7 0%, #C0AAFF 99%)`,
                        opacity:
                            formData.mobile && formData.password && formData.password_confirm
                                ? '1'
                                : '0.5'
                    }"
        >
          注册
        </u-button>
      </view>

      <view class="flex justify-center mt-[20rpx]">
        <navigator style="color: #999;" url="/pages/login/login" hover-class="none"
        >已有账号，去登录
        </navigator
        >
      </view>
    </view>
  </view>
  <!-- 协议弹框 -->
  <u-modal
      v-model="showModel"
      show-cancel-button
      :show-title="false"
      @confirm=";(isCheckAgreement = true), (showModel = false)"
      @cancel="showModel = false"
      confirm-color="var(--color-primary)"
  >
    <view class="text-center px-[70rpx] py-[60rpx]">
      <view> 请先阅读并同意</view>
      <view class="flex justify-center">
        <router-navigate data-theme="" to="/pages/agreement/agreement?type=service">
          <view class="text-primary">《服务协议》</view>
        </router-navigate>
        和
        <router-navigate to="/pages/agreement/agreement?type=privacy">
          <view class="text-primary">《隐私协议》</view>
        </router-navigate>
      </view>
    </view>
  </u-modal>
</template>

<script setup lang="ts">
import {register, registerUser, sendCode} from '@/api/account'
import {useAppStore} from '@/stores/app'
import {computed, reactive, ref, shallowRef} from 'vue'
import PageBg from "@/components/page-bg/page-bg.vue";
import {onPageScroll} from "@dcloudio/uni-app";


const navBg = ref<string>('rgba(255,255,255,0)')
const titleColor = ref<string>('#fff')

onPageScroll((event: any) => {
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
  titleColor.value = event.scrollTop > 10 ? '#111' : '#fff'
})

const uCodeRef = shallowRef()

const isCheckAgreement = ref(false)
const appStore = useAppStore()
const isOpenAgreement = computed(() => appStore.getLoginConfig.login_agreement == 1)
let channel = ref(1)
// #ifndef MP-WEIXIN
channel.value = 1
// #endif
// #ifndef H5
channel.value = 2
// #endif
const formData = reactive({
  channel: channel.value,
  mobile: '',
  password: '',
  password_confirm: '',
  code: ''
})
const showModel = ref(false)
const accountRegister = async () => {
  // uni.navigateTo({
  //   url: '/packages/pages/register/identity'
  // })
  // return
  if (!formData.mobile) return uni.$u.toast('请输入账号')
  if (!formData.password) return uni.$u.toast('请输入密码')
  if (!formData.password_confirm) return uni.$u.toast('请输入确认密码')
  if (!isCheckAgreement.value && isOpenAgreement.value) return (showModel.value = true)
  if (formData.password != formData.password_confirm) return uni.$u.toast('两次输入的密码不一致')
  await registerUser(formData)
  uni.navigateBack()
}

const sendDxCode = async () => {
  if (!formData.mobile) {
    uni.$u.toast('请输入手机号')
    return;
  }
  await sendCode({
    mobile: formData.mobile,
    scene: 'BDSJHM',
  })
  uni.$u.toast('发送成功')
  uCodeRef.value?.start()
}

const codeTips = ref('')

const codeChange = (text: string) => {
  codeTips.value = text
}
</script>

<style lang="scss">
page {
  height: 100%;
  background: #f5f5f5;
}

.text-color {
  color: var(--color-primary);
}
</style>
